<template>
  <el-form :model="addFormList" class="demo-form-inline" label-width="120px" :rules="rules">
    <el-form-item label="任务名称" prop="name">
      <el-input v-model="addFormList.name" placeholder="请输入任务名称" clearable />
    </el-form-item>
    <el-form-item label="产品名称" prop="productId">
      <el-select v-model="addFormList.productId" placeholder="请选择产品名称" style="width: 100%;" @change="getDetailData"
        clearable>
        <el-option v-for="item in productSelect" :label="item.label" :value="item.value" :key="item.value" />
      </el-select>
    </el-form-item>

    <el-form-item label="标题" prop="title">
      <el-input v-model="addFormList.title" placeholder="请输入标题" />
    </el-form-item>

    <el-form-item label="邮件正文" prop="content">
      <el-input v-model="addFormList.content" type="textarea" />
    </el-form-item>

    <el-form-item label="发送邮箱" prop="sendMails">
      <el-input v-model="addFormList.sendMails" />
    </el-form-item>

    <el-form-item label="星期" prop="weekdays">
      <el-checkbox-group v-model="addFormList.weekdays">
        <el-checkbox :label="1" name="monday">周一</el-checkbox>
        <el-checkbox :label="2" name="tuesday">周二</el-checkbox>
        <el-checkbox :label="3" name="wednesday">周三</el-checkbox>
        <el-checkbox :label="4" name="thursday">周四</el-checkbox>
        <el-checkbox :label="5" name="friday">周五</el-checkbox>
        <el-checkbox :label="6" name="saturday">周六</el-checkbox>
        <el-checkbox :label="7" name="sunday">周日</el-checkbox>
      </el-checkbox-group>
    </el-form-item>

    <el-form-item label="时间" prop="time">
      <div class="example-basic">
        <el-time-picker format="HH:mm" v-model="addFormList.time[0]" />
        <span>~</span>
        <el-time-picker format="HH:mm" v-model="addFormList.time[1]" />
      </div>
    </el-form-item>

    <el-form-item label="间隔" prop="interval">
      <el-input-number v-model="addFormList.interval[0]" :min="1" :max="10" controls-position="right"
        style="width: 30%;" />
      <span>~</span>
      <el-input-number v-model="addFormList.interval[1]" :min="1" :max="10" controls-position="right"
        style="width: 30%;" />
    </el-form-item>
    <el-form-item label="发送对象">
      <el-button type="primary" @click="searchClient = true">选择</el-button>
      <el-button>重置</el-button>
    </el-form-item>

    <el-table :data="addChick" style="width: 85%" :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ 'text-align': 'center', background: '#fafafa', color: '#606266' }">
      <el-table-column prop="no" label="客户编号" width="200" />
      <el-table-column prop="labelText" label="客户标签" />
      <el-table-column prop="name" label="客户名称" />
      <el-table-column prop="updTime" label="更新时间" width="200" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-popconfirm title="你确定要删除吗?" @confirm="del(row)">
            <template #reference>
              <el-button type="primary" link >删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="page" layout="prev, pager, next, jump, " :total="total" background
      class="mt-4" />
    <el-form-item label="备注" prop="remark">
      <el-input v-model="addFormList.remark" type="textarea" />
    </el-form-item>
  </el-form>
  <!-- 弹窗 -->
  <el-dialog v-model="searchClient" title="选择客户" width="64%">
    <searchUser ref="refC" />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="searchClient = false">取消</el-button>
        <el-button type="primary" @click="sure">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue"
import searchUser from "../components/searchUser.vue"
import { getProductDetail,submitInfo } from "@a/task"
import moment from 'moment'
import { ElMessage } from 'element-plus'

const props = defineProps({
  productSelect: {
    type: Array<any>,
    required: true
  },
  timeInfo: {
    type: Object,
    required: true
  }
})
const addFormList = ref<any>({
  time: [],
  interval: [],
})
const rules = reactive({
  name: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  productId: [
    {
      required: true,
    },
  ],
  title: [
    {
      required: true,
    },
  ],
  content: [
    {
      required: true,
    },
  ],
  weekdays: [
    {
      required: true,
    },
  ],
  time: [
    {
      required: true,
    },
  ],
  interval: [
    {
      required: true,
    },
  ]
})
const emits = defineEmits(["triggersInitList"]);

const subInfo = ()=>{
  const obj ={...addFormList.value}
  obj.weekdays = obj.weekdays.join(',')
  obj.spaceBegin = obj.interval[0]
  obj.spaceEnd = obj.interval[1]
  obj.timeBegin = moment(obj.time[0]).format('HH:mm')
  obj.timeEnd = moment(obj.time[1]).format('HH:mm')
  obj.companyList = addChick.value
  submitInfo(obj).then((res:any)=>{
    if(res.code === 10000){
      ElMessage({
       message: res.msg,
        type: 'success',
        onClose: ()=>{
          // 这里调那个自定义事件
          emits("triggersInitList")
          // 初始化表单
          clearForm();
        }
      })
    }
  })
}
const clearForm = ()=>{
  addFormList.value = {time: [],interval: []}
  addChick.value = []
}
const addChick = ref<any>([])
const refC: any = ref(null)
const sure = () => {
  addChick.value = refC.value.userInfo
  searchClient.value = false
}
const page = ref(1);
const total = ref(0);
const show = () => {
  addFormList.value.weekdays = props.timeInfo.week
  addFormList.value.time[0] = moment(props.timeInfo.startTime, 'HH:mm')
  addFormList.value.time[1] = moment(props.timeInfo.endTime, 'HH:mm')
  addFormList.value.interval[0] = props.timeInfo.start
  addFormList.value.interval[1] = props.timeInfo.end
}
const searchClient = ref(false)
//拿到详情请求
const getDetailData = (val: any) => {
  getProductDetail(val).then((res: any) => {
    if (res.code === 10000) {
      addFormList.value.title = res.result.title
      addFormList.value.content = res.result.content
    }
  })
}
const del = (val: any) => {
  addChick.value = addChick.value.filter((item: any) => {
    return item.id != val.id
  })
}
defineExpose({
  show,
  subInfo
})
</script>

<style scoped>
.el-form {
  width: 90%;

  .el-table {
    margin-left: 120px;
  }

  .el-pagination {
    display: flex;
    margin-top: 14px;
    justify-content: flex-end;
    margin-right: 0px;
    margin-bottom: 40px;
  }
}
</style>